<template>
	<view class="userLayout pageBg" v-if="platform !== 'web' || Object.keys(userInfo).length">
		<view :style="{ height: getNavBarHeight() + 'px' }"></view>
		<view class="userInfo">
			<view class="avatar">
				<image :src="userInfo.avatarUrl || '../../static/images/logo.png'" mode="aspectFill"></image>
			</view>
			<!-- #ifdef H5 -->
			<view class="ip">{{ userInfo.ip }}</view>
			<view class="address">
				来自于：
				{{ userInfo.city || userInfo.province || userInfo.country }}
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="login_btn" @click="toLogin">{{ userInfo.nickName || '点击登录' }}</view>
			<!-- #endif -->
		</view>

		<view class="section" v-if="token">
			<view class="list">
				<view class="row" @click="toDownload">
					<view class="left">
						<uni-icons type="download-filled" size="20"></uni-icons>
						<view class="text">我的下载</view>
					</view>
					<view class="right">
						<view class="text">{{ downloadCount }}</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>

				<view class="row" @click="toScore">
					<view class="left">
						<uni-icons type="star-filled" size="20"></uni-icons>
						<view class="text">我的评分</view>
					</view>
					<view class="right">
						<view class="text">{{ scoreCount }}</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="section">
			<view class="list">
				<navigator url="/pages/notice/detail?id=684993ab5012dddb10a68f26" class="row">
					<view class="left">
						<uni-icons type="notification-filled" size="20"></uni-icons>
						<view class="text">订阅更新</view>
					</view>
					<view class="right">
						<!-- <view class="text"></view> -->
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>

				<navigator url="/pages/notice/detail?id=684ceb38a41649a86ce5df27" class="row">
					<view class="left">
						<uni-icons type="flag-filled" size="20"></uni-icons>
						<view class="text">常见问题</view>
					</view>
					<view class="right">
						<!-- <view class="text"></view> -->
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>

				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" size="20"></uni-icons>
						<view class="text">联系客服</view>
					</view>
					<view class="right">
						<!-- <view class="text"></view> -->
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click="clickContact">拨打电话</button>
					<!-- #endif -->
				</view>
			</view>
		</view>

		<view class="section" v-if="token">
			<view class="list">
				<view class="row" @click="toLoginOut">
					<view class="left">
						<uni-icons type="gear-filled" size="20"></uni-icons>
						<view class="text">退出登录</view>
					</view>
					<view class="right">
						<view class="text">退出当前账号</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="loadingLayout" v-else>
		<view :style="{ height: getNavBarHeight() + 'px' }"></view>
		<uni-load-more status="loading"></uni-load-more>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { getNavBarHeight } from '@/utils/system.js';
import { staticHistoryCount, getUserInfo, loginOut } from '@/api/index.js';
import { getPlatform } from '@/utils/system.js';
import { ref } from 'vue';
import TokenManager from '@/utils/tokenManager.js';

const downloadCount = ref(0);
const scoreCount = ref(0);
const userInfo = ref({});
const token = ref();
const platform = getPlatform();
const getStorage = () => uni.getStorageSync('userInfo') || {};

// 查询评分和下载统计数
const queryStatic = (type) => {
	// 统计下载数
	staticHistoryCount({
		type: 'download',
		userId: userInfo.value.uid
	}).then((res) => {
		if (res.errCode === 0) {
			downloadCount.value = res.total;
		}
	});
	// 统计评分数
	staticHistoryCount({
		type: 'score',
		userId: userInfo.value.uid
	}).then((res) => {
		if (res.errCode === 0) {
			scoreCount.value = res.total;
		}
	});
};
// 获取用户信息
const queryUserInfo = () => {
	getUserInfo().then((res) => {
		userInfo.value = res.data;
	});
};

// 跳转到登录
const toLogin = () => {
	if (token.value) return;
	uni.navigateTo({
		url: '/pages/user/login'
	});
};

// 我的下载
const toDownload = () => {
	if (!token.value) {
		return uni.navigateTo({
			url: '/pages/user/login'
		});
	}
	uni.navigateTo({
		url: '/pages/classlist/classlist?name=我的下载&type=download'
	});
};

// 我的评分
const toScore = () => {
	if (!token.value) {
		return uni.navigateTo({
			url: '/pages/user/login'
		});
	}
	uni.navigateTo({
		url: '/pages/classlist/classlist?name=我的评分&type=score'
	});
};

// 退出登录
const toLoginOut = () => {
	uni.showModal({
		content: '是否确认退出登录？',
		success: async (res) => {
			if (res.confirm) {
				const res = await loginOut({
					clientInfo: uni.getSystemInfoSync(),
					uniIdToken: token.value
				});
				if (res.errCode === 0) {
					TokenManager.clearToken();
					uni.removeStorageSync('userInfo');
					uni.reLaunch({
						url: '/pages/user/user'
					});
				}
			}
		}
	});
};

// 联系客服-拨打电话
const clickContact = () => {
	uni.makePhoneCall({
		phoneNumber: '114'
	});
};

onLoad(() => {
	// #ifdef H5
	queryUserInfo();
	// #endif
	// #ifndef H5
	userInfo.value = getStorage();
	token.value = TokenManager.getToken();
	if (token.value) {
		queryStatic();
	}
	// #endif
});
</script>

<style lang="scss" scoped>
.userLayout {
	.userInfo {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 50rpx 0;
		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.ip {
			font-size: 44rpx;
			color: #333;
			padding: 20rpx 0 5rpx;
		}
		.address {
			font-size: 28rpx;
			color: #aaa;
		}
		.login_btn {
			font-size: 44rpx;
			color: #333;
			padding: 20rpx 0 5rpx;
		}
	}

	.section {
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		.list {
			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				height: 100rpx;
				border-bottom: 1px solid #eee;
				position: relative;
				background: #fff;
				&:last-child {
					border-bottom: 0;
				}
				.left {
					display: flex;
					align-items: center;
					:deep() {
						.uni-icons {
							color: $brand-theme-color !important;
						}
					}
					.text {
						padding-left: 20rpx;
						color: #666;
					}
				}
				.right {
					display: flex;
					align-items: center;
					.text {
						font-size: 28rpx;
						color: #aaa;
					}
				}
				button {
					position: absolute;
					top: 0;
					left: 0;
					height: 100rpx;
					width: 100%;
					opacity: 0;
				}
			}
		}
	}
}
</style>
